<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="sass/yuekao.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			    var widths=document.documentElement.clientWidth;
				document.documentElement.style.fontSize=widths/750*100+"px";
				window.onresize=function(){
					document.location.reload()
			    }   
		</script>
	</head>
	<body> 
		<header>
			<img src="img/切片_01.jpg"/>
			<div class="ding">蜀山区潜山路&nbsp;&nbsp;<div><img src="img/切片_04.jpg"/>输入商家名字</div></div>
			<div class="swiper-container swiper1">
			    <div class="swiper-wrapper">
			       <div class="swiper-slide">
			           <img src="img/切片_07.jpg"/>
			       </div>
			       <div class="swiper-slide">
			           <img src="img/切片_07.jpg"/>
			       </div>
			       <div class="swiper-slide">
			           <img src="img/切片_07.jpg"/>
			       </div>
			       <div class="swiper-slide">
			           <img src="img/切片_07.jpg"/>
			       </div>
			    </div>
			    <div class="swiper-pagination"></div>
		    </div>
		</header>
		<!--图文-->
		<section id="tu">
			<div class="swiper-container fen">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">
			            <li><img src="img/切片_10.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_12.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_15.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_18.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_25.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_28.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_31.jpg"/><p>美食</p></li>
			            <li><img src="img/切片_33.jpg"/><p>美食</p></li>
			            <!--<li><img src="img/切片_10.jpg"/><p>美食</p></li>-->
			        </div>
			        
			    </div>
			</div>
		</section>
		<section id="qian">
			<div id="yi">
				<p class="p1">9.9元抢餐</p>
				<p class="p2">距离结束</p>
				<p class="p3"><span>00</span>：<span>00</span>：<span>00</span></p>
				<img src="img/切片_43.jpg"/>
			</div>
			<div id="er">
				<div class="wu">
					<li>
						<p class="p4"  style="font-size: 0.25rem;">无辣不欢</p>
						<p class="p2"  style="color: grey;font-size: 0.15rem;">超值慢简介</p>
					</li>
					<img src="img/切片_40.jpg"/>
				</div>
				<div class="xia">
					<li>
						<p class="p4">下单减10元</p>
						<p class="p2" style="color: grey;font-size: 0.15rem;">机制性不假</p>
						<img src="img/切片_47.jpg"/>
		 			</li>
					<li>
						<p class="p4">下单减10元</p>
		  				<p class="p2" style="color: grey;font-size: 0.15rem;">机制性不假</p>
						<img src="img/切片_47.jpg"/>
					</li>
				</div>
			</div>  
		</section>
		  <div id="shang"><img src="img/切片_56.jpg"/>附近商家</div>
		 	<img src="img/切片_53.jpg" id="pian"/>
		<footer>
			<li><img src="img/切片_60.jpg"/><p>外卖</p></li>
			<li><img src="img/切片_63.jpg"/><p>订单</p></li>
			<li><img src="img/切片_66.jpg"/><p>发现</p></li>
			<li><img src="img/切片_69.jpg"/><p>我的</p></li>
		</footer>
		<script type="text/javascript">
	 		$.ajax({
				type:"get",
				url:"http://localhost:6666/yuekao",
				async:true, 
				dataType:"json",
				success:function(data){
					console.log(data);  
		  			//图文(使用json传送)
					var ding="";
					for(var i=0;i<data.header.img.length;i++){
						ding+="<li><img src='"+data.header.img[i]+"'/><p>"+data.header.wen[i]+"</p></li>";
					}
					$(".fen .swiper-slide").append(ding);				}  
			});
			//轮播图
			var swiper1=new Swiper(".swiper1",{
							autoplay:2000,
							loop:true,
						})
					
		</script>
	</body>
</html>
